
setPage();

// window.localStorage.mes = JSON.stringify([]);
function setPage() {

   if (window.localStorage.mes !== undefined) {
    const mes = JSON.parse(window.localStorage.mes);
   

    let str = '';
    mes.forEach((item,key) =>{

        str += `
                <tr>
                 <td>${item.name}</td>
                 <td>${item.phoneNum}</td>
                 <td>${item.degree}</td>
                 <td>${item.age}</td>
                 <td>${item.salary}</td>
                 <td><button name="change" index="${key}">修改</button> <button name="del" index="${key}">删除</button></td>
                </tr> 
        `
    })
    $('tbody').html(str);

  }
}


$('.box').click(function(event) {

    event.preventDefault();

   

   if ($(event.target).attr('name') === 'save') {
       
        let name = $('[name="name"]').val();
        let phoneNum = $('[name="phoneNum"]').val();
        let degree = $('[name="degree"]').val();
        let age = $('[name="age"]').val();
        let salary = $('[name="salary"]').val();
        const single = {name:name,phoneNum:phoneNum,degree:degree,age:age,salary:salary};
        // single单个一次的数据上传
        // mes：localStorage里的存储

       if (window.localStorage.mes === undefined) {
        
         window.localStorage.setItem('mes',JSON.stringify([single]))
        } else {
            const mes = JSON.parse(window.localStorage.mes);
            mes.unshift(single);
            window.localStorage.mes = JSON.stringify( mes );

        }
        
   } else if ($(event.target).attr('name') === "del") {
           
        const index = $(event.target).attr('index')
        if( !window.confirm('您确定要删除吗?') ){ return }
          
        const mes = JSON.parse(window.localStorage.mes);
        mes.splice(index,1);
        window.localStorage.mes = JSON.stringify( mes );

   } else if ($(event.target).attr('name') === 'change') {
        
         $('.change').css('display','block');
         const num = Number($(event.target).attr('index'));
        localStorage.setItem('num',num);

        const mes = JSON.parse(window.localStorage.mes);
        console.log(mes);
         
         $('[name="changeName"]').val(mes[num].name)
         $('[name="changePhoneNum"]').val(mes[num].phoneNum)
         $('[name="changeDegree"]').val(mes[num].degree)
         $('[name="changeAge"]').val(mes[num].age)
         $('[name="changeSalary"]').val(mes[num].salary)

         

   }  else if ($(event.target).attr('name') === 'close') {

    $('.change').css('display','none');

   }  else if ($(event.target).attr('name') === 'saveChange') {
       const num = JSON.parse(window.localStorage.num);

       const mes = JSON.parse(window.localStorage.mes);

       console.log(mes[num]); 

       mes[num] = {name:$('[name="changeName"]').val(),
       phoneNum:$('[name="changePhoneNum"]').val(),
       degree:$('[name="changeDegree"]').val(),
       age:$('[name="changeAge"]').val(),
       salary:$('[name="changeSalary"]').val()
    }

     $('.change').css('display','none');

    window.localStorage.mes = JSON.stringify( mes );

       
   }





   setPage();
   
})
